<template>
  <div class="footer">
    <input data-v-3d3d7c8b="" :placeholder="props.placeholderval" type="text" v-model="inputValue">
    <span @click="tofirends">@</span>
    <button @click="ok()" class="btn">√</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const emit = defineEmits(['ok', 'tofirends'])
const inputValue = ref('')
const props = defineProps({
  placeholderval: {
    type: String
  }
});
// 点击ok
const ok = () => {
  emit('ok', inputValue.value)
  inputValue.value = ''
}
// 点击ok
const tofirends = () => {
  emit('tofirends')
}
</script>

<style lang="scss" scoped>
.footer {
  position: fixed;
  align-items: center;
  justify-content: space-evenly;
  bottom: 0;
  left: 0;
  height: 44px;
  width: 100%;
  background-color: #161822;
  z-index: 20;
  display: flex;

  input {
    background-color: #161822;
    outline: none;
    width: 302px;
    font-size: 14px;
    color: #e8e8e9;
    padding-left: 10px;
    caret-color: #face15;
    border: 0;
  }

  span {
    font-size: 18px;
    color: #fff;
  }

  .btn {
    color: #fff;
    background-color: #161822;
    border: 0;
    font-size: 16px;
  }
}
</style>